<template>
  <custom-modal
    v-if="visible"
    :fullscreen="true"
    :visible="visible"
    :title="$t('applyReview')"
    :destroyOnClose="true"
    :suring="confirmLoading"
    class="manageServiceApplyReviewModal"
    modalCls=".manageServiceApplyReviewModal"
    @cancel="handleCancel"
    @ok="saveData"
  >
    <a-form-model
      layout="horizontal"
      class="AsteriskAfter newEditStyle"
      ref="ruleForm"
      :rules="rules"
      :model="formData"
    >
      <a-form-model-item :label="$t('remark')" prop="remark">
        <custom-text-area
          @change="formData.remark = $event"
          :val="formData.remark"
          :rows="3"
          :max-len="200"
        ></custom-text-area>
      </a-form-model-item>
      <a-form-model-item :label="$t('auditProcess')">
        <div style="height:360px;margin-bottom:16px">
          <full-parent-dom-with-dask :loading="loadingProcess"></full-parent-dom-with-dask>
          <process-viewer
            :key="`designer-${processView.index}`"
            v-if="processView.index"
            :xml="processView.xmlData"
            style="height:100%" />
        </div>
        <audit-flow-process ref="auditProcessRef" method-name="getServiceFlowDesinNodeData"></audit-flow-process>
      </a-form-model-item>
    </a-form-model>
  </custom-modal>
</template>
<script>
import CustomTextArea from '@/components/CustomTextArea/index.vue'
import CustomModal from '@/components/CustomModal/index.vue'
import ProcessViewer from '@/components/ProcessViewer'
import AuditFlowProcess from '@/views/components/AuditFlowProcess/config.vue'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import flowDesignApi from '@/api/modules/flowManage/flowDesign'
const initProcessView = {
  index: '',
  xmlData: ''
}
const initFormData = {
  remark: ''
}
export default {
  name: 'ManageServiceapplyReviewModal',
  components: { ProcessViewer, AuditFlowProcess, FullParentDomWithDask, CustomTextArea, CustomModal },
  props: {
    serviceIds: {
      type: Array,
      default: () => {
        return []
      }
    },
    modelId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      visible: false,
      rules: {
        remark: [{ min: 0, max: 500, message: this.$t('length200'), trigger: 'change' }]
      },
      formData: { ...initFormData },
      processView: {
        ...initProcessView
      },
      loadingProcess: false,
      confirmLoading: false
    }
  },
  watch: {
    visible: {
      handler (val) {
        if (val) {
          this.initData()
        } else {
          this.resetData()
        }
      },
      immediate: true
    }
  },
  methods: {
    resetData () {
      this.formData = { ...initFormData }
      this.processView = { ...initProcessView }
    },
    initData () {
      this.getProcessXmlData()
    },
    // 获取流程图
    getProcessXmlData () {
      this.loadingProcess = true
      flowDesignApi.getServiceFlowDesinXmlData().then(res => {
        this.processView.index = 'process' + Math.random
        this.processView.xmlData = res.data
      }).finally(() => {
        this.loadingProcess = false
      }).catch(err => {
        console.log(err)
      })
    },
    saveData () {
      const vm = this
      vm.$refs.ruleForm.validate((valid) => {
        if (!valid) {
          return
        }
        const auditConfigData = this.$refs.auditProcessRef.getConfigsData()
        if (auditConfigData.length === 0) {
          return
        }
        this.confirmLoading = true
        const paramsData = {
          serviceIds: vm.serviceIds,
          modelId: vm.modelId,
          candidates: auditConfigData === 'noNeedRole' ? [] : auditConfigData,
          remark: vm.formData.remark
        }
        vm.$api.publishAudit(paramsData).then(() => {
          vm.visible = false
          // 刷新管理服务列表
          vm.$emit('afterDoAction')
        }).finally(() => {
          vm.confirmLoading = false
        })
      })
    },
    handleCancel () {
      this.visible = false
    }
  }
}
</script>
